<template>
  <div v-loading="loading">
    <el-form ref="form" :model="form" :rules="rules" label-width="120px" class="dataForm">
      <el-row>
        <el-col :span="12">
          <el-form-item :label="$t('基金全称')" prop="fundName">
            <template>
              <router-link
                target="_blank"
                :to="{path:'/fund/fundBasehome',query:{id:form.fundId}}"
                class="link_a"
              >{{ form.fundName }}
              </router-link>
            </template>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('基金简称')" prop="fundAbbreviation">
            <template>
              <router-link
                target="_blank"
                :to="{path:'/fund/fundBasehome',query:{id:form.fundId}}"
                class="link_a"
              >{{ form.fundAbbreviation }}
              </router-link>
            </template>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('目标募集规模') + $t('金额单位')" prop="targetAmount">
            <Money v-model="form.targetAmount" unit="w" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('已募集规模') + $t('金额单位')" prop="amountRaised">
            <Money v-model="form.amountRaised" unit="w" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item :label="$t('潜在出资人意向出资金额') + $t('金额单位')" prop="amountRaised">
            <Money v-model="form.intentionTotalAmountRaised" unit="w" disabled />
          </el-form-item>
        </el-col>
      </el-row>

      <div class="fundIntentionInvest">
        <div class="area-header">
          <span class="area-header-title">{{ $t('意向投资人') }}</span>
        </div>
        <el-row :gutter="10" class="mb8">
          <el-col :span="1.5">
            <el-button
              type="primary"
              icon="el-icon-plus"
              size="mini"
              @click="addHandle"
            >{{ $t("新增") }}</el-button>
          </el-col>
        </el-row>
        <ul>
          <li v-for="info in fundIntentionInvestList" :key="info.index">
            <div class="content">
              <div class="main" @click="updateHandle(info)">
                <div class="top">
                  <router-link
                    target="_blank"
                    :to="{path:'/fund/lpBase/lpBaseHome',query:{lpId:info.investorId}}"
                    class="link_a"
                    @click.native.stop="recorePath({ fromPath: $route.fullPath, path:'/fund/lpBase/lpBaseHome',query:{lpId:info.investorId}})"
                  >
                    <span class="nickName">{{ info.investorName }}</span>
                  </router-link>
                </div>
                <div class="otherPeople"><span>意向出资金额</span>: <p>{{ moneyFormat(info.amountIntention ,'w') }} 万</p></div>
                <div class="otherPeople"><span>最新跟踪时间</span>: <p class="time">{{ parseTime(info.happenDate) }}</p></div>
                <div class="otherPeople"><span>详细情况</span>:<p v-html="formatText(info.trackRemark)" /></div>
                <div class="otherPeople"><span>下步计划</span>:<p v-html="formatText(info.nextPlan)" /></div>
              </div>
              <div class="btn">
                <el-button
                  size="small"
                  type="text"
                  style="margin-left: 10px"
                  @click="findTrack(info)"
                >{{ $t('全部跟踪') }}</el-button>
                <el-button
                  size="small"
                  type="text"
                  @click="updateHandle(info)"
                >{{ $t('修改') }}</el-button>
                <el-button
                  size="small"
                  type="text"
                  @click="deleteHandle(info)"
                >{{ $t('删除') }}</el-button>
                <el-button
                  size="small"
                  type="text"
                  @click="changeInvestHandle(info)"
                >{{ $t('转为出资人') }}</el-button>
              </div>
            </div>
          </li>
        </ul>
      </div>
      <pagination
        v-show="total>0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
      <FileTable
        :list.sync="form.fileList"
        data-type="wf_fund_raise"
        :business-id="autoBusinessId($route.query.id, form)"
        :btn-show="!otherBtnHide"
      />
    </el-form>

    <!-- 添加或修改意向投资人对话框 -->
    <el-dialog :title="title" :visible.sync="formOpen" :close-on-click-modal="false" :lock-scroll="false" custom-class="dialogForm" append-to-body>
      <fundIntentionInvestForm ref="fundIntentionInvestForm" />
    </el-dialog>
    <!-- 添加或修改意向投资人对话框 -->
    <el-dialog :title="title" :visible.sync="investFormOpen" :close-on-click-modal="false" :lock-scroll="false" custom-class="dialogForm" append-to-body>
      <fundInvestorForm ref="fundInvestorForm" />
    </el-dialog>
    <!-- 意向投资人全部跟踪对话框 -->
    <el-dialog :visible.sync="trackOpen" :title="title" width="80%" :close-on-click-modal="false" custom-class="dialogNewPattern" :lock-scroll="false" append-to-body>
      <lpTrackList ref="lpTrackList" :lp-id="lpId" />
    </el-dialog>
    <OnlinePreview ref="OnlinePreview" :preview-tit="previewTit" />
  </div>
</template>

<script>
    import { saveWfFundRaise, getWfFundRaise } from '@/api/fund/raise/wfFundRaise'
    import { getFundBase } from '@/api/fund/fundBase'
    import { delFundIntentionInvest, listFundIntentionInvest } from '@/api/fund/intentionInvest/fundIntentionInvest'
    import fundIntentionInvestForm from '@/views/fund/intentionInvest/fundIntentionInvestForm'
    import fundInvestorForm from '@/views/fund/investor/fundInvestorForm'
    import lpTrackList from '@/views/fund/lpTrack/lpTrackList'
    export default {
        components: {
          fundIntentionInvestForm,
          fundInvestorForm,
          lpTrackList
        },
        data() {
            return {
                // 总条数
                total: 0,
                // 意向投资人表格数据
                fundIntentionInvestList: [],
                // 弹出层标题
                title: '',
                // 是否显示弹出层
                formOpen: false,
                investFormOpen: false,
                trackOpen: false,
                lpId: undefined,
                // 查询参数
                queryParams: {
                  investorName: undefined,
                  fundId: undefined,
                  pageNum: 1,
                  pageSize: 10
                },
                // 表单参数
                form: {
                  fundId: undefined
                },
                // 表单校验
                rules: {
                },
                // 遮罩层
                loading: false,
                // 操作按钮默认不展示
                buttonShow: true,
                otherBtnHide: false,
                previewTit: '',
                fundId: undefined
            }
        },
        created() {
            this.$bus.$emit('async_done')
        },
        methods: {
            // 初始化数据
            init(data) {
                this.loading = true
                if (data != null && data.id !== undefined) {
                    getWfFundRaise(data.id).then(response => {
                        this.form = response.data
                        this.queryParams.fundId = response.data.fundId
                        this.getList()
                    }).catch(() => {
                        this.loading = false
                    })
                } else {
                    this.reset()
                    if (data != null) {
                      this.form.fileList = data.fileList
                    }
                    if (data != null) {
                      this.form.fileList = data.fileList
                    }
                    getFundBase(this.$route.query.id).then(response => {
                      this.form.fundName = response.data.fundFullName
                      this.form.fundAbbreviation = response.data.fundName
                      this.form.targetAmount = response.data.fundBaseFund.targetAmount
                      this.queryParams.fundId = this.$route.query.id
                      this.getList()
                    }).catch(() => {
                      this.loading = false
                    })
                }
            },
            formatText(text) {
              if (text) {
                var val = text.replace(/\n/g, '</li><li>')
                return '<ul class="ul_style"><li>' + val + '</li></ul>'
              } else {
                return text
              }
            },
            /** 查询意向投资人列表 */
            getList() {
              this.loading = true
              listFundIntentionInvest(this.queryParams).then(response => {
                this.fundIntentionInvestList = response.rows
                this.total = response.total
                this.totalSumAll()
                this.loading = false
              })
            },
            totalSumAll() {
              let totalSumAll = 0
              this.fundIntentionInvestList.map((item) => { if (!isNaN(item.amountIntention)) totalSumAll += item.amountIntention })
              if (isNaN(totalSumAll)) {
                this.form.intentionTotalAmountRaised = 0
              } else {
                this.form.intentionTotalAmountRaised = totalSumAll
              }
            },
            // 表单重置
            reset() {
                this.form = {
                    id: undefined,
                    fundId: this.$route.query.id,
                    fundName: undefined,
                    fundAbbreviation: undefined,
                    targetAmount: 0,
                    amountRaised: 0,
                    intentionTotalAmountRaised: 0,
                    remark: undefined,
                    createBy: undefined,
                    createTime: undefined,
                    updateBy: undefined,
                    updateTime: undefined,
                    delFlag: undefined
                }
                this.resetForm('form')
            },
            /** 新增按钮操作 */
            addHandle() {
              this.formOpen = true
              this.title = this.$t('添加意向投资人')
              this.$nextTick(() => {
                this.$refs.fundIntentionInvestForm.init(null)
              })
            },
            /** 修改按钮操作 */
            updateHandle(row) {
              this.formOpen = true
              this.title = this.$t('修改意向投资人')
              this.$nextTick(() => {
                // 调用form页面的 init 方法初始化数据
                this.$refs.fundIntentionInvestForm.init(row)
              })
            },
            /** 删除按钮操作 */
            deleteHandle(row) {
              this.$confirm(this.$t('是否确认删除?'), this.$t('警告'), {
                confirmButtonText: this.$t('确定'),
                cancelButtonText: this.$t('取消'),
                type: 'warning'
              }).then(function() {
                return delFundIntentionInvest(row.id)
              }).then(() => {
                this.getList()
                this.msgSuccess(this.$t('删除成功'))
              }).catch(function() {
              })
            },
            /** 转换成投资人信心按钮操作 */
            changeInvestHandle(row) {
              this.investFormOpen = true
              this.title = this.$t('出资人信息')
              this.$nextTick(() => {
                // 调用form页面的 copeHandle 方法初始化数据
                this.$refs.fundInvestorForm.changeInvest(row)
              })
            },
            preview(fileId) {
              this.$refs.OnlinePreview.onlinePreviewFile(fileId, 'view')
            },
            /**
             * 查询全部跟踪
             */
            findTrack(row) {
              this.trackOpen = true
              this.title = row.investorName + ' - ' + this.$t('出资人跟踪')
              this.lpId = row.investorId
              this.$nextTick(() => {
                this.$refs.lpTrackList.getList()
              })
            },
            // 取消按钮
            cancel() {
                this.$parent.$parent.formOpen = false
                this.$parent.$parent.reset()
            },
            // 关闭form页面
            closeForm() {
                // 关闭form页面遮罩层
                this.loading = false
                // 关闭form页面
                if (this.$parent.$parent.formOpen !== undefined) {
                    this.$parent.$parent.formOpen = false
                }
                // 刷新list页面
                if (this.$parent.$parent.getList !== undefined) {
                  this.$parent.$parent.getList()
                }
            },
            /** 提交按钮 */
            submitForm: function() {
                return new Promise((resolve, reject) => {
                  this.$refs['form'].validate(valid => {
                    // 验证数据
                    if (valid) {
                      // 弹出遮罩层
                      this.loading = true
                      // 保存数据
                      saveWfFundRaise(this.form).then(response => {
                        if (response.code === 200) {
                          this.msgSuccess(this.$t('保存成功'))
                          this.loading = false
                          resolve(response.data.id)
                        } else {
                          this.msgError(response.msg)
                          this.loading = false
                          reject(response)
                        }
                      })
                    } else {
                      this.locationError(document)
                      reject()
                    }
                  })
                })
           }

        }

    }
</script>
<style lang="scss" scoped>
/deep/.dialogNewPattern {
  width: 90% !important;
  height: 90%;
  overflow: hidden;
  top: 5% !important;
  margin-top: unset !important;
  .el-dialog__body {
    min-height: 400px;
    overflow: auto;
    height: 85%;
    margin-bottom: 10px;
  }
}
.otherFile{
  color: rgba(0, 0, 0, 0.8);
  font-size: 13px;
  display: flex;
  span{
    color: rgba(0, 0, 0, 0.65);
    white-space: nowrap;
  }
  .file{
    margin-left: 10px;
    p{
      line-height: 20px;
      margin: 0 0 5px;

      &:last-child{
        margin: 0;
      }
    }
  }

}
.click_file{
  color:#409EFF;
  cursor: pointer;
  display: block !important;
}

.fundIntentionInvest{
  // box-shadow: 0 2px 12px 0 #eee;
  border-radius: 10px;
  margin: 10px 0;
  padding: 25px 100px 25px 0px;
  p{
    margin: 0;
  }
  ul{
    li{
      position: relative;
      border-left: 1px solid #E1E2E8;
      padding-left: 30px;
      padding-bottom: 20px;
      //.time{
      //  position: absolute;
      //  left: -100px;
      //  font-size: 14px;
      //  top: calc(50% - 12px);
      //}
      .top{
        display: flex;
        align-items: center;
        column-gap: 10px;
        margin-bottom: 10px;
        .nickName{
          font-weight: bold;
          font-size: 14px;
        }
        .track{
          background: #9288D0;
          color: #fff;
          font-size: 13px;
          border-radius: 10px;
          padding: 3px 6px;
        }
        .type{
          background: #59D6CD;
          color: #fff;
          font-size: 13px;
          border-radius: 10px;
          padding: 3px 6px;
        }
      }
      .otherPeople{
        color: rgba(0, 0, 0, 0.8);
        font-size: 13px;
        display: flex;
        span{
          color: rgba(0, 0, 0, 0.65);
          white-space: nowrap;
        }
        p{
          margin-left: 5px;
          line-height: 16px;
          overflow-wrap: anywhere;
        }
      }
      .details{
        color: #F4A9A2;
      }
      .main{
        background-color: #F4F7F6;
        border-radius: 10px;
        padding: 15px;
        flex: 1;
        position: relative;
        &::before{
          position: absolute;
          content: '';
          width:0;
          height:0;
          border-top:10px solid transparent;
          border-bottom:10px solid transparent;
          border-right:10px solid #F4F7F6;
          left: -10px;
          top: calc(50% - 5px);
        }
        div{
          margin-bottom: 10px;
          line-height: 16px;
          &:last-child{
            margin-bottom: 0;
          }
        }
      }
      .content{
        display: flex;
        align-items: center;
        .btn{
          //align-items: center;
          width: 70px;
          text-align: left;
          margin-left: 10px;
        }
      }
      &::before{
        position: absolute;
        content: '';
        width: 10px;
        height: 10px;
        border-radius: 50%;
        background: #fff;
        border: 1px solid #E1E2E8;
        left: -6px;
        top: calc(50% - 10px);
      }
    }
  }
}
</style>
